<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <link rel="icon" href="/static/img/logo.png" type="image/png">
    
    <!-- 字体预加载优化 -->
    <link rel="preconnect" href="https://cdn.jsdelivr.net">
    <link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
    
    <!-- 样式表 -->
    <link rel="stylesheet" href="/static/css/mobile/common.css">
    <link rel="stylesheet" href="/static/css/mobile/profile.css">
    <link rel="stylesheet" href="/static/css/markdown.css">
    
    <!-- KaTeX数学公式支持 - 优化加载 -->
    <link rel="preload" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css"></noscript>
    
    <!-- KaTeX 字体预加载 -->
    <link rel="preload" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/fonts/KaTeX_Main-Regular.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/fonts/KaTeX_Math-Italic.woff2" as="font" type="font/woff2" crossorigin>
    <!-- Markdown解析库 -->
    <script src="https://cdn.jsdelivr.net/npm/marked@11.1.1/marked.min.js"></script>
    <title>个人中心 - 智慧答题系统</title>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="mobile-header">
        <div class="header-left">
            <span class="header-title">个人中心</span>
        </div>
        <div class="header-right">
            <button class="btn-icon" id="editBtn">✏️</button>
        </div>
    </div>

    <div class="page-wrapper">
        <!-- 用户信息卡片 -->
        <div class="user-card">
            <div class="user-avatar" id="userAvatarContainer">
                <img src="" alt="头像" class="avatar-img" id="userAvatarImg" style="display: none;">
                <span id="userAvatarText">用</span>
            </div>
            <div class="user-info">
                <h2 class="user-name" id="userName">加载中...</h2>
                <p class="user-email" id="userEmail">---</p>
                <!-- 等级信息 -->
                <div class="user-level" id="userLevel">Lv.1</div>
                <div class="exp-bar">
                    <div class="exp-fill" id="expFill" style="width: 0%"></div>
                </div>
                <div class="exp-text" id="expText">0/100</div>
            </div>
        </div>

        <div class="container">
            <!-- 统计数据 -->
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-icon">📝</div>
                    <div class="stat-value" id="totalQuizzes">0</div>
                    <div class="stat-label">答题次数</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon">⭐</div>
                    <div class="stat-value" id="avgScore">0</div>
                    <div class="stat-label">平均分</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon">🏆</div>
                    <div class="stat-value" id="totalScore">0</div>
                    <div class="stat-label">总得分</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon">✓</div>
                    <div class="stat-value" id="accuracy">0%</div>
                    <div class="stat-label">正确率</div>
                </div>
            </div>

            <!-- 选项卡导航 -->
            <div class="tabs-container">
                <div class="tabs-nav">
                    <button class="tab-btn active" data-tab="achievements">🏆 我的成就</button>
                    <button class="tab-btn" data-tab="goals">🎯 学习目标</button>
                    <button class="tab-btn" data-tab="history">📝 答题记录</button>
                    <button class="tab-btn" data-tab="settings">⚙️ 设置</button>
                </div>

                <div class="tabs-content">
                    <!-- 成就展示 -->
                    <div class="tab-pane active" data-tab-content="achievements">
                        <div class="achievements-preview" id="achievementsPreview">
                            <div class="loading">
                                <div class="spinner"></div>
                                <span>加载中...</span>
                            </div>
                        </div>
                        <button class="btn btn-secondary btn-block" onclick="showAllAchievements()">查看全部成就</button>
                    </div>

                    <!-- 学习目标 -->
                    <div class="tab-pane" data-tab-content="goals">
                        <div class="section-desc">💪 坚持就是胜利！设定目标，每天进步一点点</div>
                        <div class="goals-preview" id="goalsPreview">
                            <div class="goal-item" data-goal-type="daily">
                                <div class="goal-header">
                                    <span class="goal-icon">📅</span>
                                    <span class="goal-label">今日目标</span>
                                    <span class="goal-status" data-status="not-set">未设置</span>
                                </div>
                                <div class="goal-detail">
                                    <span class="goal-description">今天还没有设置学习目标</span>
                                </div>
                                <div class="goal-progress-section" style="display: none;">
                                    <div class="goal-info">
                                        <span class="goal-progress-label">完成进度</span>
                                        <span class="goal-progress-text">0/0 题</span>
                                    </div>
                                    <div class="progress-bar">
                                        <div class="progress-fill" style="width: 0%"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="goal-item" data-goal-type="weekly">
                                <div class="goal-header">
                                    <span class="goal-icon">📆</span>
                                    <span class="goal-label">本周目标</span>
                                    <span class="goal-status" data-status="not-set">未设置</span>
                                </div>
                                <div class="goal-detail">
                                    <span class="goal-description">本周还没有设置学习目标</span>
                                </div>
                                <div class="goal-progress-section" style="display: none;">
                                    <div class="goal-info">
                                        <span class="goal-progress-label">完成进度</span>
                                        <span class="goal-progress-text">0/0 题</span>
                                    </div>
                                    <div class="progress-bar">
                                        <div class="progress-fill" style="width: 0%"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button class="btn btn-secondary btn-block" onclick="showGoalSettings()">设置目标</button>
                    </div>

                    <!-- 答题记录 -->
                    <div class="tab-pane" data-tab-content="history">
                        <div class="quiz-history" id="quizHistory">
                            <div class="loading">
                                <div class="spinner"></div>
                                <span>加载中...</span>
                            </div>
                        </div>
                    </div>

                    <!-- 设置选项 -->
                    <div class="tab-pane" data-tab-content="settings">
                        <div class="settings-list">
                            <div class="setting-item" onclick="showPreferencesModal()">
                                <div class="setting-icon">⚙️</div>
                                <div class="setting-content">
                                    <div class="setting-title">偏好设置</div>
                                    <div class="setting-desc">主题、通知等个人偏好</div>
                                </div>
                                <div class="setting-arrow">›</div>
                            </div>
                            <div class="setting-item" onclick="showDataExportModal()">
                                <div class="setting-icon">📊</div>
                                <div class="setting-content">
                                    <div class="setting-title">数据导出</div>
                                    <div class="setting-desc">导出学习数据和成绩</div>
                                </div>
                                <div class="setting-arrow">›</div>
                            </div>
                            <div class="setting-item" onclick="showAboutModal()">
                                <div class="setting-icon">ℹ️</div>
                                <div class="setting-content">
                                    <div class="setting-title">关于应用</div>
                                    <div class="setting-desc">版本信息和帮助</div>
                                </div>
                                <div class="setting-arrow">›</div>
                            </div>
                        </div>
                        <!-- 退出登录按钮 -->
                        <div class="logout-section">
                            <button class="btn btn-danger btn-block" id="logoutBtn">
                                退出登录
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑个人信息模态框 -->
    <div id="editModal" style="display: none;" onclick="closeEditModal()">
        <div class="modal" onclick="event.stopPropagation()">
            <h3 class="modal-title">编辑个人信息</h3>
            
            <!-- 头像上传 -->
            <form id="uploadAvatarForm" style="margin-bottom: 20px;">
                <div class="form-group">
                    <label class="form-label">更换头像</label>
                    <div class="avatar-upload-area">
                        <img src="" alt="头像预览" class="avatar-preview" id="avatarPreview" style="display: none;">
                        <div class="avatar-preview-placeholder" id="avatarPreviewPlaceholder">👤</div>
                        <input type="file" id="avatarInput" accept="image/*" style="display: none;">
                        <button type="button" class="btn btn-secondary btn-sm" onclick="document.getElementById('avatarInput').click()">选择图片</button>
                        <p class="file-hint">支持 JPG、PNG、GIF、WEBP，最大 5MB</p>
                    </div>
                    <div class="error-message" id="avatarError"></div>
                </div>
                <button type="submit" class="btn btn-primary btn-block" id="uploadAvatarBtn">上传头像</button>
            </form>
            
            <!-- 编辑信息 -->
            <form id="editForm">
                <div class="form-group">
                    <label class="form-label">用户名</label>
                    <input type="text" class="form-control" id="editUsername" required>
                </div>
                <div class="form-group">
                    <label class="form-label">邮箱</label>
                    <input type="email" class="form-control" id="editEmail" required>
                </div>
                <div class="modal-buttons">
                    <button type="button" class="btn btn-secondary" onclick="closeEditModal()">
                        取消
                    </button>
                    <button type="submit" class="btn btn-primary">
                        保存
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 答题详情模态框 -->
    <div id="detailModal" style="display: none;" onclick="closeDetailModal()">
        <div class="modal detail-modal" onclick="event.stopPropagation()">
            <div class="modal-header">
                <h3 class="modal-title">答题详情</h3>
                <button class="close-btn" onclick="closeDetailModal()">✕</button>
            </div>
            <div class="modal-body" id="detailContent">
                <div class="loading">
                    <div class="spinner"></div>
                    <span>加载中...</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 成就详情模态框 -->
    <div id="achievementsModal" style="display: none;" onclick="closeAchievementsModal()">
        <div class="modal" onclick="event.stopPropagation()">
            <h3 class="modal-title">全部成就</h3>
            <div class="achievements-list" id="allAchievementsList">
                <div class="loading">
                    <div class="spinner"></div>
                    <span>加载中...</span>
                </div>
            </div>
            <div class="modal-buttons">
                <button class="btn btn-primary" onclick="closeAchievementsModal()">关闭</button>
            </div>
        </div>
    </div>

    <!-- 目标设置模态框 -->
    <div id="goalSettingsModal" style="display: none;" onclick="closeGoalSettingsModal()">
        <div class="modal" onclick="event.stopPropagation()">
            <h3 class="modal-title">设置学习目标</h3>
            <div class="goal-description">
                <p class="goal-desc-text">设置你的学习目标，保持每天进步！</p>
            </div>
            <form id="mobileGoalForm">
                <div class="form-group">
                    <label class="form-label">📅 目标类型</label>
                    <select class="form-control" id="goalTypeSelect">
                        <option value="daily">每日目标（今天完成）</option>
                        <option value="weekly">每周目标（本周完成）</option>
                        <option value="monthly">每月目标（本月完成）</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">🎯 目标答题次数</label>
                    <input type="number" class="form-control" id="mobileTargetQuizzes" min="1" placeholder="例如：10题">
                    <small class="form-hint">设置你想要完成的答题次数（必填）</small>
                </div>
                <div class="form-group">
                    <label class="form-label">⭐ 目标平均得分</label>
                    <input type="number" class="form-control" id="mobileTargetScore" min="0" max="100" placeholder="例如：80分">
                    <small class="form-hint">设置每次答题的平均目标分数（可选）</small>
                </div>
                <div class="form-group">
                    <label class="form-label">✔️ 目标正确率 (%)</label>
                    <input type="number" class="form-control" id="mobileTargetAccuracy" min="0" max="100" placeholder="例如：85%">
                    <small class="form-hint">设置你的目标正确率（可选）</small>
                </div>
                <div class="goal-tip">
                    <span class="tip-icon">💡</span>
                    <span class="tip-text">小提示：只有“目标答题次数”是必填的，其他两项可根据需要选填</span>
                </div>
                <div class="modal-buttons">
                    <button type="button" class="btn btn-secondary" onclick="closeGoalSettingsModal()">取消</button>
                    <button type="submit" class="btn btn-primary">保存目标</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 偏好设置模态框 -->
    <div id="preferencesModal" style="display: none;" onclick="closePreferencesModal()">
        <div class="modal" onclick="event.stopPropagation()">
            <h3 class="modal-title">偏好设置</h3>
            <form id="preferencesForm">
                <div class="form-group">
                    <label class="form-label">主题</label>
                    <select class="form-control" id="themeSelect">
                        <option value="light">浅色主题</option>
                        <option value="dark">深色主题</option>
                        <option value="auto">跟随系统</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">通知设置</label>
                    <div class="switch-group">
                        <label class="switch">
                            <input type="checkbox" id="notificationsEnabled">
                            <span class="slider"></span>
                        </label>
                        <span class="switch-label">启用通知</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">学习提醒</label>
                    <div class="switch-group">
                        <label class="switch">
                            <input type="checkbox" id="reminderEnabled">
                            <span class="slider"></span>
                        </label>
                        <span class="switch-label">启用学习提醒</span>
                    </div>
                </div>
                <div class="form-group" id="reminderTimeGroup" style="display: none;">
                    <label class="form-label">提醒时间</label>
                    <input type="time" class="form-control" id="reminderTime" value="09:00">
                </div>
                <div class="form-group">
                    <label class="form-label">语言</label>
                    <select class="form-control" id="languageSelect">
                        <option value="zh-CN">简体中文</option>
                        <option value="en-US">English</option>
                    </select>
                </div>
                <div class="modal-buttons">
                    <button type="button" class="btn btn-secondary" onclick="closePreferencesModal()">取消</button>
                    <button type="submit" class="btn btn-primary">保存设置</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 数据导出模态框 -->
    <div id="dataExportModal" style="display: none;" onclick="closeDataExportModal()">
        <div class="modal" onclick="event.stopPropagation()">
            <h3 class="modal-title">数据导出</h3>
            <div class="export-options">
                <div class="export-item">
                    <div class="export-icon">📊</div>
                    <div class="export-content">
                        <div class="export-title">答题记录</div>
                        <div class="export-desc">导出所有答题历史和成绩</div>
                    </div>
                    <button class="btn btn-primary btn-sm" onclick="exportQuizHistory()">导出</button>
                </div>
                <div class="export-item">
                    <div class="export-icon">🏆</div>
                    <div class="export-content">
                        <div class="export-title">成就数据</div>
                        <div class="export-desc">导出已获得的成就信息</div>
                    </div>
                    <button class="btn btn-primary btn-sm" onclick="exportAchievements()">导出</button>
                </div>
                <div class="export-item">
                    <div class="export-icon">📈</div>
                    <div class="export-content">
                        <div class="export-title">学习统计</div>
                        <div class="export-desc">导出学习进度和统计数据</div>
                    </div>
                    <button class="btn btn-primary btn-sm" onclick="exportStatistics()">导出</button>
                </div>
            </div>
            <div class="modal-buttons">
                <button class="btn btn-secondary" onclick="closeDataExportModal()">关闭</button>
            </div>
        </div>
    </div>

    <!-- 关于应用模态框 -->
    <div id="aboutModal" style="display: none;" onclick="closeAboutModal()">
        <div class="modal" onclick="event.stopPropagation()">
            <h3 class="modal-title">关于应用</h3>
            <div class="about-content">
                <div class="app-info">
                    <div class="app-icon">🎓</div>
                    <div class="app-details">
                        <h4>智慧答题系统</h4>
                        <p class="version">版本 1.0.0</p>
                        <p class="description">一个现代化的在线答题学习平台，帮助用户提升知识水平。</p>
                    </div>
                </div>
                <div class="features-list">
                    <h5>主要功能</h5>
                    <ul>
                        <li>📝 多样化题目类型</li>
                        <li>🏆 成就系统</li>
                        <li>📊 学习统计</li>
                        <li>🎯 学习目标设置</li>
                        <li>📱 移动端适配</li>
                    </ul>
                </div>
                <div class="contact-info">
                    <h5>联系我们</h5>
                    <p>如有问题或建议，请联系开发者Liam</p>
                    <p>邮箱：haohao215@foxmail.com</p>
                    <p>QQ：2152851664</p>
                </div>
            </div>
            <div class="modal-buttons">
                <button class="btn btn-primary" onclick="closeAboutModal()">确定</button>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <nav class="mobile-nav">
        <a href="/" class="nav-item active">
            <div class="nav-icon"><img src="static/img/homePage.png" alt="ICO" style=" width:28px;height:auto;"></div>
            <div class="nav-label">首页</div>
        </a>
        <a href="/quiz" class="nav-item">
            <div class="nav-icon"><img src="static/img/test.png" alt="ICO" style=" width:30px;height:auto;"></div>
            <div class="nav-label">答题</div>
        </a>
        <a href="/leaderboard" class="nav-item">
            <div class="nav-icon"><img src="static/img/leaderboard.png" alt="ICO" style=" width:26px;height:auto;"></div>
            <div class="nav-label">排行榜</div>
        </a>
        <a href="/profile" class="nav-item">
            <div class="nav-icon"><img src="static/img/me_b.png" alt="ICO" style=" width:26px;height:auto;"></div>
            <div class="nav-label">我的</div>
        </a>
    </nav>

    <!-- KaTeX JavaScript - 异步加载 -->
    <script async src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
    <script async src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
    
    <script src="/static/js/mobile/profile.js"></script>
</body>
</html>

